<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>词语闪卡学习 - 《秋天的怀念》</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 min-h-screen flex flex-col items-center p-4 md:p-8">
    <h1 class="text-3xl md:text-4xl font-bold text-slate-800 mb-8 text-center">《秋天的怀念》核心词语闪卡</h1>
    
    <!-- 闪卡容器 -->
    <div class="w-full max-w-md h-[400px] mb-8 perspective-1000">
        <div id="flashcard" class="w-full h-full relative transform-style-preserve-3d transition-transform duration-500 shadow-xl rounded-2xl">
            <!-- 卡片正面（词语） -->
            <div class="card-face front absolute w-full h-full backface-hidden flex flex-col items-center justify-center bg-white rounded-2xl p-6">
                <div class="text-slate-500 text-lg mb-2">词语</div>
                <div id="word" class="text-4xl font-bold text-slate-800">瘫痪</div>
            </div>
            <!-- 卡片背面（释义+例句） -->
            <div class="card-face back absolute w-full h-full backface-hidden flex flex-col justify-center p-8 bg-blue-50 rounded-2xl rotate-y-180">
                <div class="text-blue-600 text-lg mb-3 font-semibold">释义</div>
                <div id="definition" class="text-slate-700 text-lg mb-6 leading-relaxed">身体某部分完全或不完全丧失运动功能；也比喻机构、交通等不能正常运转。</div>
                <div class="text-blue-600 text-lg mb-3 font-semibold">例句</div>
                <div id="example" class="text-slate-700 text-lg leading-relaxed">一场疾病让他下肢<span class="font-semibold text-blue-700">瘫痪</span>，从此只能与轮椅为伴。</div>
            </div>
        </div>
    </div>

    <!-- 按钮容器 -->
    <div class="flex flex-wrap gap-4 justify-center">
        <button id="flipBtn" class="px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors shadow-md">翻转卡片</button>
        <button id="nextBtn" class="px-6 py-3 bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 transition-colors shadow-md">随机下一个</button>
    </div>

    <style>
        .perspective-1000 {
            perspective: 1000px;
        }
        .transform-style-preserve-3d {
            transform-style: preserve-3d;
        }
        .backface-hidden {
            backface-visibility: hidden;
        }
        .rotate-y-180 {
            transform: rotateY(180deg);
        }
        .flipped {
            transform: rotateY(180deg);
        }
    </style>

    <script>
        // 词语数据（包含所有指定词语）
        const wordData = [
            {
                word: "瘫痪",
                definition: "身体某部分完全或不完全丧失运动功能；也比喻机构、交通等不能正常运转。",
                example: "一场疾病让他下肢<span class='font-semibold text-blue-700'>瘫痪</span>，从此只能与轮椅为伴。"
            },
            {
                word: "暴怒",
                definition: "极端愤怒，脾气暴躁且情绪激动。",
                example: "听到这个消息，他再也抑制不住，<span class='font-semibold text-blue-700'>暴怒</span>地摔碎了桌上的杯子。"
            },
            {
                word: "憔悴",
                definition: "形容人瘦弱、面色不好，精神萎靡的样子。",
                example: "为了照顾生病的孩子，她连日操劳，面容变得十分<span class='font-semibold text-blue-700'>憔悴</span>。"
            },
            {
                word: "诀别",
                definition: "指再无会期的离别，多指生死离别，语气沉重。",
                example: "在医院的最后时刻，她握着母亲的手，与她作了最后的<span class='font-semibold text-blue-700'>诀别</span>。"
            },
            {
                word: "烂漫",
                definition: "形容颜色鲜明美丽；也指性格坦率自然，不做作。",
                example: "秋日公园里，菊花盛开得格外<span class='font-semibold text-blue-700'>烂漫</span>，吸引了许多游人驻足。"
            },
            {
                word: "沉寂",
                definition: "非常安静，没有声响；也指消息全无。",
                example: "深夜的村庄一片<span class='font-semibold text-blue-700'>沉寂</span>，只有偶尔传来几声犬吠。"
            },
            {
                word: "捶打",
                definition: "用拳头或器物反复击打。",
                example: "他因自责而用力<span class='font-semibold text-blue-700'>捶打</span>着自己的大腿，懊悔不已。"
            },
            {
                word: "翻来覆去",
                definition: "形容来回翻动身体；也指反复思考或做事。",
                example: "躺在床上，他<span class='font-semibold text-blue-700'>翻来覆去</span>睡不着，心里全是白天的事。"
            }
        ];

        // DOM元素
        const flashcard = document.getElementById('flashcard');
        const flipBtn = document.getElementById('flipBtn');
        const nextBtn = document.getElementById('nextBtn');
        const wordEl = document.getElementById('word');
        const definitionEl = document.getElementById('definition');
        const exampleEl = document.getElementById('example');

        // 当前卡片索引
        let currentIndex = 0;
        // 已展示的索引集合
        let shownIndexes = [currentIndex];

        // 翻转卡片
        flipBtn.addEventListener('click', () => {
            flashcard.classList.toggle('flipped');
        });

        // 随机切换下一个卡片
        nextBtn.addEventListener('click', () => {
            // 如果所有卡片都展示过，重置已展示集合
            if (shownIndexes.length === wordData.length) {
                shownIndexes = [];
            }

            // 随机选择未展示过的索引
            let randomIndex;
            do {
                randomIndex = Math.floor(Math.random() * wordData.length);
            } while (shownIndexes.includes(randomIndex));

            // 更新当前索引和已展示集合
            currentIndex = randomIndex;
            shownIndexes.push(currentIndex);

            // 确保卡片显示正面
            if (flashcard.classList.contains('flipped')) {
                flashcard.classList.remove('flipped');
            }

            // 更新卡片内容（延迟执行，确保翻转动画完成）
            setTimeout(() => {
                const data = wordData[currentIndex];
                wordEl.textContent = data.word;
                definitionEl.textContent = data.definition;
                exampleEl.innerHTML = data.example;
            }, 300);
        });

        // 初始化显示第一个词语
        window.onload = () => {
            const data = wordData[currentIndex];
            wordEl.textContent = data.word;
            definitionEl.textContent = data.definition;
            exampleEl.innerHTML = data.example;
        };
    </script>
</body>
</html>